<template>
  <div>
    <el-button type="primary" size="small" @click="handleOutbound">出库</el-button>
    <el-dialog title="出库" v-model="dialogFormVisible" draggable append-to-body :close-on-click-modal="false">
      <el-form :model="form" label-width="100px" size="small">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="出库单号">
              <el-input v-model="form.billNumber" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="出库主题">
              <el-input v-model="form.title" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="接收人">
              <el-select v-model="form.region" placeholder="请选择接收人">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="接受人电话">
              <el-input v-model="form.phone" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="预计归还时间">
              <el-radio-group v-model="form.returnDate">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.date1"
                  style="width: 100%"></el-date-picker>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否暂存">
              <el-checkbox v-model="form.storage"></el-checkbox>
              <span class="beCareful_text" style="
                  margin-left: 10px;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                ">*暂存指放到中转柜</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注">
              <el-input type="textarea" v-model="form.desc"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table :data="tableData" height="250" border style="width: 100%">
        <el-table-column prop="date" label="日期" width="180"> </el-table-column>
        <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
        <el-table-column label="操作">、

          <template slot-scope="{ row }">
            <el-button size="small" link class="danger_button" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
        <el-button @click="dialogFormVisible = false" size="small" type="primary">保 存</el-button>
        <el-button @click="dialogFormVisible = false" type="success" size="small">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Outbound',
  data() {
    return {
      dialogFormVisible: false,
      form: {
        billNumber: '',
        title: '',
        region: '',
        phone: '',
        returnDate: '',
        storage: true,
        desc: '',
      },
      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
      ],
    }
  },

  mounted() { },

  methods: {
    //出库
    handleOutbound() {
      this.dialogFormVisible = true
      // 创建时间戳 根据时间戳生成单号和主题名称，可自定义修改
      // 单号规则：C+时间戳
      this.form = {
        billNumber: 'C' + Date.now(),
        title: new Date().toLocaleString().replaceAll('/', '-') + ' 出库单',
        region: '',
        phone: '',
        returnDate: '',
        storage: true,
        desc: '',
      }
    },
  },
}
</script>

<style lang="less" scoped>
@media screen and (min-width: 600px) and (max-width: 1920px) {
  .el-dialog {
    width: 80%;
  }
}

@media screen and (min-width: 1920px) and (max-width: 3840px) {
  .el-dialog {
    width: 50%;
  }
}
</style>
